<template>
    <div v-loading="loading" class="house-container">
        <!-- 筛选器 -->
        <filter-data @filterSubmit="filterSubmit" />
        <basics-card>
            <div class="title-wrap">
                <strong class="strong-room">
                    总房间数
                    <i class="i">{{ operationData1.totalRooms }}</i>
                </strong>
                <strong class="strong-lease">
                    已出租
                    <i class="i">{{ operationData1.rentedRooms }}</i>
                </strong>
                <strong class="strong-room">
                    可出租
                    <i class="i">{{ operationData1.unRentedRooms }}</i>
                </strong>
                <span class="export-report">导出月报＞</span>
            </div>
            <house-card :bgmData="[]" ref="Child1" />
            <div class="tips-wrap">
                <span class="common-link">
                    收保证金
                    <i class="line">{{ operationData2.bond }}元＞</i>
                </span>
                <span class="common-link">
                    退保证金
                    <i class="line">{{ operationData2.refundBond }}元＞</i>
                </span>
                <span class="common-link">
                    累计保证金
                    <i class="line">{{ operationData2.accumBond }}元＞</i>
                </span>
            </div>
            <house-item :bgmData="[]" ref="Child2" />
        </basics-card>

        <basics-card>
            <h5 class="h5">门店待办/我的待办</h5>
            <h6 class="h6">l 营销</h6>
            <house-marketing :bgmData="[]" ref="Child3" />
            <h6 class="h6">l 合同</h6>
            <house-contract :bgmData="[]" />
            <h6 class="h6">l 财务</h6>
            <house-finance :bgmData="[]" />
            <h6 class="h6">l 服务</h6>
            <house-serve :bgmData="[]" ref="Child4" />
        </basics-card>

        <div class="title-wrap" v-if="showHouseData">
            <strong class="strong-room">
                房态图
                <span class="transaction">企业客户办理＞</span>
            </strong>
        </div>
        <house-room :bgmData="houseData" v-if="showHouseData" />
    </div>
</template>

<script>
import FilterData from '../filter-data.vue';
import BasicsCard from '@/components/Widget/basics-card.vue';
import HouseCard from '../house/house-card.vue';
import HouseItem from '../house/house-item.vue';
import HouseMarketing from '../house/house-marketing.vue';
import HouseContract from '../house/house-contract.vue';
import HouseFinance from '../house/house-finance.vue';
import HouseServe from '../house/house-serve.vue';
import HouseRoom from '../house/house-room.vue';
import { getStoreBldgData, getRoomState, getBasicInfos1, getBasicInfos2 } from '@/api/DashBoardApi';

export default {
    components: { FilterData, BasicsCard, HouseCard, HouseItem, HouseMarketing, HouseContract, HouseFinance, HouseServe, HouseRoom },
    data() {
        return {
            loading: true,
            houseData: [],
            showHouseData: false,
            operationData1: {
                totalRooms: '0',
                rentedRooms: '0',
                unRentedRooms: '0'
            },
            operationData2: {
                bond: '0.00',
                refundBond: '0.00',
                accumBond: '0.00'
            }
        };
    },
    mounted() {
        this.loadData1({});
        this.loadData2({});
    },
    methods: {
        loadRoomState(val) {
            getRoomState(val).then((res) => {
                this.houseData = res.obj;
                console.log(this.houseData);
            });
        },
        loadData1(parms) {
            this.loading = true;
            getBasicInfos1(parms)
                .then((res) => {
                    if (res && res.obj) {
                        this.operationData1 = res.obj;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        loadData2(parms) {
            this.loading = true;
            getBasicInfos2(parms)
                .then((res) => {
                    if (res && res.obj) {
                        this.operationData2 = res.obj;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        filterSubmit(val) {
            if (val.stores && val.stores.length == 1) {
                this.showHouseData = true;
                this.loadRoomState(val);
            } else {
                this.showHouseData = false;
            }
            this.loadData1(val);
            this.loadData2(val);
            this.$refs.Child1.loadData(val);
            this.$refs.Child2.loadData(val);
            this.$refs.Child3.loadData(val);
            this.$refs.Child4.loadData(val);
        }
    }
};
</script>

<style lang="scss" scoped>
.house-container {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;

    .h5 {
        font-size: 16px;
        font-weight: 800;
        color: #165dff;
    }

    .h6 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
    }

    .title-wrap {
        display: flex;
        align-items: center;
        height: 30px;

        .strong-room {
            font-size: 15px;
            font-weight: 600;
            color: #1d2129;

            .i {
                color: #f53f3f;
                font-style: normal;
            }

            .transaction {
                font-size: 13px;
                color: #165dff;
                margin-left: 20px;
                text-decoration: underline;
                cursor: pointer;
            }
        }

        .strong-lease {
            font-size: 15px;
            font-weight: 600;
            margin-top: 20px;
            color: #1d2129;
            margin: 0 20px 0 70px;

            .i {
                color: #53bc63;
                font-style: normal;
            }
        }

        .export-report {
            margin-left: 70px;
            font-size: 13px;
            color: #165dff;
            cursor: pointer;
        }
    }

    .tips-wrap {
        margin: 20px 0 12px 0;

        .common-link {
            font-size: 13px;
            font-weight: 500;
            color: #1d2129;
            margin-right: 60px;

            .line {
                color: #f53f3f;
                text-decoration: underline;
                font-style: normal;
                cursor: pointer;
            }
        }
    }
}
</style>
